示例：省市区选择

本示例讲解在Django中使用jquery的ajax进行数据交互。 jquery框架中提供了$.ajax、$.get、$.post方法，用于进行异步交互，由于Django中默认使用CSRF约束，推荐使用$.get。

示例：实现省市区的选择。

最终实现效果如图：

city

1）将jquery文件拷贝到static/js/目录下。

city

2）打开booktest/views.py文件，定义视图area1，用于显示下拉列表。

#提供显示下拉列表的控件，供用户操作
def area1(request):
    return render(request,'booktest/area1.html')

3）打开booktest/urls.py文件，配置url。

    url(r'^area1/$', views.area1),

4）在templates/booktest/目录下创建area1.html。



    省市区列表

5）运行服务器，在浏览器中输入如下网址：

http://127.0.0.1:8000/area1/

浏览效果如下图：

city

6）打开booktest/views.py文件，定义视图area2，用于获取省信息。

from django.http import JsonResponse
...
#获取省信息
def area2(request):
    list = AreaInfo.objects.filter(aParent__isnull=True)
    list2 = []
    for item in list:
        list2.append([item.id, item.atitle])
    return JsonResponse({'data': list2})

7）打开booktest/urls.py文件，配置url。

    url(r'^area2/$', views.area2),

8）在浏览器中输入如下网址。

http://127.0.0.1:8000/area2/

浏览效果如下图：

city

9）打开booktest/views.py文件，定义视图area3，用于根据编号获取对应的子级信息，如果传递的是省编号则获取市信息，如果传递的是市编号则获取区县信息。

#根据pid查询子级区域信息
def area3(request, pid):
    list = AreaInfo.objects.filter(aParent_id=pid)
    list2 = []
    for item in list:
        list2.append([item.id, item.atitle])
    return JsonResponse({'data': list2})

10）打开booktest/urls.py文件，配置url。

    url(r'^area3_(\d+)/$', views.area3),

11）在浏览器中输入如下网址：

http://127.0.0.1:8000/area3_140000/

浏览效果如下图：

city

12）在浏览器中输入如下网址：

http://127.0.0.1:8000/area1/

选择效果如下图：

city